import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Table, Spin, Form, Row, Col, Input, Button, Dropdown, Menu, Icon, message, Modal, Select, Tree, TreeSelect, DatePicker, Checkbox, Tabs, InputNumber } from 'antd'
import _ from 'lodash'
import moment from 'moment'

import Ajax from 'lib/Ajax'
import { addConfig } from 'actions/config'
import { getNewTreeData, findRowData, getNameByCode } from 'lib/fun'
import EditBank from './editBank'
import AreaInput from 'components/areaInput'
import InputNum from 'components/inputNum'

const SelectTreeNode = TreeSelect.TreeNode;
const Option = Select.Option;
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

class ModuleName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      activeKey: '1',   //tab选中
      master: false,
      isOrphan: false,
      rowdata: {},
      editBankVisabled: false,
      editBankType: 'new',
      editBankRowData: {},
      citizenBankList: []
    }
  }

  componentDidMount(){
    const { config, addConfig } = this.props;
    if(!config.orphanTypeCode){
      // 孤儿类型
      addConfig('orphanTypeCode', 16);
    }
    if(!config.bankCode){
      // 所属银行
      addConfig('bankCode', 31);
    }
    if(!config.fiveTypeCode){
      // 五保类型
      addConfig('fiveTypeCode', 15);
    }
  }

  componentWillReceiveProps(nextProps){
    if(!nextProps.visible){
      this.props.form.resetFields();
      this.setState({
        activeKey: '1',
        citizenBankList: [],
        master: false,
        isOrphan: false
      });
    }else{
      if(nextProps.type == 'edit'){
        if(nextProps.rowdata.citizenInfoId&&(!this.props.rowdata.citizenInfoId&&this.props.rowdata.citizenInfoId != nextProps.rowdata.citizenInfoId)){
          this.setState({
            loading: true,
            activeKey: '1'
          });
          this.loadCitizen(nextProps.rowdata.citizenInfoId);
        }
      }else if(this.props.type == 'edit'){
        this.setState({
          master: false,
          isOrphan: false,
          activeKey: '1',
          citizenBankList: []
        });
      }
    }
  }

  loadCitizen = (id)=>{
    var self = this;
    Ajax({
      url: '/citizen/get',
      data: {
        citizenInfoId: id
      },
      success: function(data){
        self.setState({
          master: data.master,
          loading: false,
          rowdata: data,
          citizenBankList: data.citizenBankList||[]
        });
      },
      error: function(error){
        message.error(error);
      }
    });
  }

  handleCommit = () => {
    var self = this;
    self.props.form.validateFields((err, values) => {
      if(err == null&&!this.state.loading){
        self.setState({
          loading: true
        });
        const { type, rowdata } = self.props;

        console.log(JSON.stringify(values));

        var data = self.props.form.getFieldsValue(['name', 'nameZw', 'genderCode', 'nationCode', 'degreeCode', 'address', 'addressZw', 'telephone', 'citizenInfoTypeCode', 'householdTypeCode', 'relationCode', 'remark', 'identNumber', 'identTypeCode']);
        // 区划
        data.areaId = parseInt(values.areaId);
        // 生日
        data.birthday = values.birthday?values.birthday.format('YYYY-MM-DD'):"";
        // 增加属性
        data.citizenProperty = self.props.form.getFieldsValue(['orphanTypeCode', 'reservoirsim', 'armyReturn', 'old', 'deform', 'uniqChild','orphan','head', 'special']);
        // 户主
        data.master = self.state.master;
        // 户口信息
        data.household = self.props.form.getFieldsValue(['householdRegisterNumber', 'householdNumber']);
        if(this.state.master){
          data.household.householdTypeCode = values.householdTypeCode;
          data.household.householdNumber = values.identNumber;
          // 是户主->与户主关系默认是户主
          data.relationCode = '555';
        }
        data.household.householdProperty = self.props.form.getFieldsValue(['lowAmount','fiveTypeCode','applyEcologySum','low','five','difficult','plains','sjyDifficult','sjyFuel','forestEcology','','']);
        data.household.householdAreaInfo = self.props.form.getFieldsValue(['farmToForestNumber', 'farmLandArea', 'fineBreedArea', 'economyArea', 'agriculturalArea', 'fillGrassArea', 'forestEcologyArea', 'plainsEcologyArea', 'consolidateReturnArea', 'plainsGrazingArea', 'returnArea', 'reservoirsMove']);
        // 银行信息"
        data.citizenBankList = self.state.citizenBankList;
        // id
        var { household } = this.state.rowdata;
        if(self.props.type == 'edit'){
          data.citizenInfoId = rowdata.citizenInfoId;
          this.state.rowdata.citizenProperty&&(data.citizenProperty.citizenPropertyId = this.state.rowdata.citizenProperty.citizenPropertyId);
          household&&Object.assign(data.household, {
            householdId: this.state.rowdata.household.householdId
          });
          household&&Object.assign(data.household.householdProperty, {
            householdPropertyId: this.state.rowdata.household.householdProperty.householdPropertyId,
            householdId: this.state.rowdata.household.householdId
          });
          household&&Object.assign(data.household.householdAreaInfo, {
            householdAreaInfoId: this.state.rowdata.household.householdAreaInfo.householdAreaInfoId,
            householdId: this.state.rowdata.household.householdId
          });
        }

        console.log(JSON.stringify(data));

        Ajax({
          url: '/citizen/save',
          data: data,
          success: function(data){
            self.setState({
              loading: false
            });
            self.props.onOk(self.props.type, data);
          },
          error: function(error){
            self.setState({
              loading: false
            });
            message.error(error);
          }
        });
      }
    });
  }

  onCancel = ()=>{
    this.setState({
      loading: false
    });
    this.props.onCancel();
  }

  checkChange = (e)=>{
    console.log(e.target.checked);
    this.setState({
      master: e.target.checked
    });
  }

  isOrphanChange = (e)=>{
    console.log(e.target.checked);
    this.setState({
      isOrphan: e.target.checked
    });
  }

  operate = (type, row)=>{
    if(type == 'edit'){
      this.setState({
        editBankVisabled: true,
        editBankType: 'edit',
        editBankRowData: row
      });
    }else{
      this.setState({
        editBankVisabled: true,
        editBankType: 'new'
      });
    }
  }

  editOk = (type, rowdata)=>{
    var self = this;
    if(type == 'edit'){
      var find = _.find(self.state.citizenBankList, (item)=>{
        return item.citizenBankId == rowdata.citizenBankId
      });
      if(find){
        Object.assign(find, rowdata);
      }
      self.setState({
        editBankVisabled: false,
        editBankRowData: {},
        citizenBankList: self.state.citizenBankList
      });
    }else{
      self.state.citizenBankList?self.state.citizenBankList.push(rowdata):(self.state.citizenBankList = [rowdata]);
      self.setState({
        editBankVisabled: false,
        editBankRowData: {},
        citizenBankList: self.state.citizenBankList
      });
    }
  }
  editCancel = ()=>{
    this.setState({
      editBankVisabled: false,
      editBankRowData: {}
    });
  }
  doDelete = (rowdata)=>{
    var self = this;
    _.remove(self.state.citizenBankList, (item)=>{
      return rowdata.citizenBankId&&item.citizenBankId == rowdata.citizenBankId||item.bankCode == rowdata.bankCode&&item.bankNumber == rowdata.bankNumber
    });
    self.setState({
      rowdata: self.state.rowdata
    })
  }

  renderCitizenInfo = ()=>{
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
    };
    const formItemLayout2 = {
      labelCol: { span: 18 },
      wrapperCol: { span: 6 },
    };
    const { visible, type } = this.props;
    const { rowdata } = this.state;
    const citizenProperty = this.state.citizenProperty||{};
    const household = this.state.rowdata.household||{
      householdProperty: {},
      householdAreaInfo: {}
    };
    const { genderCode, nationCode, degreeCode, relationCode, identTypeCode, citizenInfoTypeCode, householdTypeCode, fiveTypeCode } = this.props.config;
    
    // const loop = data => data.map((item) => {
    //   if (item.children&&item.children.length > 0) {
    //     return <SelectTreeNode title={item.areaName} key={item.areaId+""} value={item.areaId + ""}>{loop(item.children)}</SelectTreeNode>;
    //   }
    //   return <SelectTreeNode title={item.areaName} key={item.areaId+""} value={item.areaId + ""} isLeaf={item.children&&item.children.length == 0}/>;
    // });
    // const treeNodes = loop(this.state.treeData);

    return (
      <div>
        <Row gutter={20}>
          <Col span={6}>
            <FormItem {...formItemLayout} label="姓名">
              {getFieldDecorator("name",{
                initialValue: type == 'edit'?rowdata.name:"",
                rules: [{
                  required: true, message: '请输入姓名',
                }]
              })(
                <Input />
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="姓名(藏)">
              {getFieldDecorator("nameZw",{
                initialValue: type == 'edit'?rowdata.nameZw:""
              })(
                <Input />
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="证件类型">
              {getFieldDecorator("identTypeCode",{
                initialValue: type == 'edit'?rowdata.identTypeCode:"",
                rules: [{
                  required: true, message: '请选择证件类型',
                }]
              })(
                <Select>
                  {
                    (identTypeCode||[]).map(function(obj){
                      return (<Option key={obj.dictionaryId} value={ obj.dictionaryCode }>{ obj.dictionaryName }</Option>)
                    })
                  }
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="证件号码">
              {getFieldDecorator("identNumber",{
                initialValue: type == 'edit'?rowdata.identNumber:"",
                rules: [{
                  required: true, message: '请输入证件号码',
                }]
              })(
                <Input disabled={type == 'edit'}/>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={6}>
            <FormItem {...formItemLayout} label="性别">
              {getFieldDecorator("genderCode",{
                initialValue: type == 'edit'?rowdata.genderCode:""
              })(
                <Select>
                  {
                    (genderCode||[]).map(function(obj){
                      return (<Option key={obj.dictionaryId} value={ obj.dictionaryCode }>{ obj.dictionaryName }</Option>)
                    })
                  }
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="出生日期">
              {getFieldDecorator("birthday", type == 'edit'&&rowdata.birthday?{
                initialValue: moment(rowdata.birthday)
              }:{
                initialValue: null
              })(
                <DatePicker 
                  placeholder="请选择日期"
                  showToday={false}
                />
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="民族">
              {getFieldDecorator("nationCode",{
                initialValue: type == 'edit'?rowdata.nationCode:"",
                rules: [{
                  required: true, message: '请选择民族',
                }]
              })(
                <Select>
                  {
                    (nationCode||[]).map(function(obj){
                      return (<Option key={obj.dictionaryId} value={ obj.dictionaryCode }>{ obj.dictionaryName }</Option>)
                    })
                  }
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="学历">
              {getFieldDecorator("degreeCode",{
                initialValue: type == 'edit'?rowdata.degreeCode:"",
                rules: [{
                  required: true, message: '请选择学历',
                }]
              })(
                <Select>
                  {
                    (degreeCode||[]).map(function(obj){
                      return (<Option key={obj.dictionaryId} value={ obj.dictionaryCode }>{ obj.dictionaryName }</Option>)
                    })
                  }
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={6}>
            <FormItem {...formItemLayout} label="联系电话">
              {getFieldDecorator("telephone",{
                initialValue: type == 'edit'?rowdata.telephone:""
              })(
                <Input />
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="家庭地址">
              {getFieldDecorator("address",{
                initialValue: type == 'edit'?rowdata.address:""
              })(
                <Input />
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="家庭地址(藏)">
              {getFieldDecorator("addressZw",{
                initialValue: type == 'edit'?rowdata.addressZw:""
              })(
                <Input />
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="区划名称">
              {getFieldDecorator("areaId",{
                initialValue: type == 'edit'?rowdata.areaId+"":"",
                rules: [{
                  required: true, message: '请选择区划名称',
                }],
              })(
                <Select>  
                  {
                    (this.props.treeData||[]).map((item)=>{
                      return (<Option key={item.areaId+''} value={ item.areaId+'' }>{ item.areaName }</Option>)
                    })
                  }
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={20} className="area-modifier">
          <Col span={6}>
            <FormItem {...formItemLayout} label="户口类型">
              {getFieldDecorator("householdTypeCode",{
                initialValue: type == 'edit'&&rowdata.household?rowdata.household.householdTypeCode:"",
                rules: [{
                  // required: true, message: '请选择户口类型',
                }]
              })(
                <Select>
                  {
                    (householdTypeCode||[]).map(function(obj){
                      return (<Option key={obj.dictionaryId} value={ obj.dictionaryCode }>{ obj.dictionaryName }</Option>)
                    })
                  }
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="人员分类">
              {getFieldDecorator("citizenInfoTypeCode",{
                initialValue: type == 'edit'?rowdata.citizenInfoTypeCode:"",
                rules: [{
                  required: true, message: '请选择人员分类',
                }]
              })(
                <Select
                >
                  {
                    (citizenInfoTypeCode||[]).map(function(obj){
                      return (<Option key={obj.dictionaryId} value={ obj.dictionaryCode }>{ obj.dictionaryName }</Option>)
                    })
                  }
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} label="概述">
              {getFieldDecorator("remark",{
                initialValue: type == 'edit'?rowdata.remark:"",
              })(
                <Input />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={6}>
            <FormItem {...formItemLayout} label="是否户主">
              {getFieldDecorator("master",{
                initialValue: type == 'edit'?rowdata.master:false,
                valuePropName: 'checked'
              })(
                <Checkbox onChange={this.checkChange}/>
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="户口簿编号">
              {getFieldDecorator("householdRegisterNumber",{
                initialValue: type == 'edit'&&household?household.householdRegisterNumber:"",
                rules: [{
                  required: true, message: '请输入户口簿编号',
                }]
              })(
                <InputNum />
              )}
            </FormItem>
          </Col>
          {!this.state.master&&(
            <Col span={6}>
              <FormItem {...formItemLayout} label="户主身份证">
                {getFieldDecorator("householdNumber",{
                  initialValue: type == 'edit'&&household?household.householdNumber:"",
                  rules: [{
                    required: true, message: '请输入户主身份证',
                  }]
                })(
                  <Input />
                )}
              </FormItem>
            </Col>
          )}
          {!this.state.master&&(
            <Col span={6}>
              <FormItem {...formItemLayout} label="与户主关系">
                {getFieldDecorator("relationCode",{
                  initialValue: type == 'edit'?rowdata.relationCode:"",
                  rules: [{
                    required: true, message: '请选择与户主关系',
                  }]
                })(
                  <Select>
                    {
                      (relationCode||[]).map(function(obj){
                        return (<Option key={obj.dictionaryId} value={ obj.dictionaryCode }>{ obj.dictionaryName }</Option>)
                      })
                    }
                  </Select>
                )}
              </FormItem>
            </Col>
          )}
        </Row>
      </div>
    )
  }

  renderCitizenProperty = ()=>{
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 18 },
      wrapperCol: { span: 6 },
    };
    const { visible, type } = this.props;
    const { rowdata } = this.state;
    const { genderCode, nationCode, degreeCode, relationCode, identTypeCode, citizenInfoTypeCode, householdTypeCode, orphanTypeCode } = this.props.config;
    
    return (
      <div>
        <Row gutter={20}>
          <Col span={4}>
            <FormItem {...formItemLayout} label="是否独生子女">
              {getFieldDecorator("uniqChild",{
                valuePropName: 'checked',
                initialValue: rowdata.citizenProperty&&type == 'edit'?rowdata.citizenProperty.uniqChild:false
              })(
                <Checkbox />
              )}
            </FormItem>
          </Col>
          <Col span={4}>
            <FormItem {...formItemLayout} label="是否村干部">
              {getFieldDecorator("head",{
                valuePropName: 'checked',
                initialValue: rowdata.citizenProperty&&type == 'edit'?rowdata.citizenProperty.head:false
              })(
                <Checkbox />
              )}
            </FormItem>
          </Col>
          <Col span={4}>
            <FormItem {...formItemLayout} label="是否复原军人">
              {getFieldDecorator("armyReturn",{
                valuePropName: 'checked',
                initialValue: rowdata.citizenProperty&&type == 'edit'?rowdata.citizenProperty.armyReturn:false
              })(
                <Checkbox />
              )}
            </FormItem>
          </Col>
          <Col span={4}>
            <FormItem {...formItemLayout} label="是否孤儿">
              {getFieldDecorator("orphan",{
                valuePropName: 'checked',
                initialValue: rowdata.citizenProperty&&type == 'edit'?rowdata.citizenProperty.orphan:false
              })(
                <Checkbox onChange={this.isOrphanChange}/>
              )}
            </FormItem>
          </Col>
          {
            this.state.isOrphan&&(
              <Col span={8}>
                <FormItem labelCol={{span: 6}} wrapperCol={{span: 18}} label="孤儿类型">
                  {getFieldDecorator("orphanTypeCode",{
                    initialValue: rowdata.citizenProperty&&type == 'edit'?rowdata.citizenProperty.orphanTypeCode:""
                  })(
                    <Select>
                    {
                      (orphanTypeCode||[]).map(function(obj){
                        return (<Option key={obj.dictionaryId} value={ obj.dictionaryCode }>{ obj.dictionaryName }</Option>)
                      })
                    }
                    </Select>
                  )}
                </FormItem>
              </Col>)
          }
        </Row>
        <Row gutter={20}>
          <Col span={4}>
            <FormItem {...formItemLayout} label="是否残疾人">
              {getFieldDecorator("deform",{
                valuePropName: 'checked',
                initialValue: rowdata.citizenProperty&&type == 'edit'?rowdata.citizenProperty.deform:false
              })(
                <Checkbox/>
              )}
            </FormItem>
          </Col>
          <Col span={4}>
            <FormItem {...formItemLayout} label="是否高龄">
              {getFieldDecorator("old",{
                valuePropName: 'checked',
                initialValue: rowdata.citizenProperty&&type == 'edit'?rowdata.citizenProperty.old:false
              })(
                <Checkbox/>
              )}
            </FormItem>
          </Col>
          <Col span={4}>
            <FormItem {...formItemLayout} label="是否水库移民">
              {getFieldDecorator("reservoirsIm",{
                valuePropName: 'checked',
                initialValue: rowdata.citizenProperty&&type == 'edit'?rowdata.citizenProperty.reservoirsIm:false
              })(
                <Checkbox/>
              )}
            </FormItem>
          </Col>
          <Col span={4}>
            <FormItem {...formItemLayout} label="是否特殊居民">
              {getFieldDecorator("special",{
                valuePropName: 'checked',
                initialValue: rowdata.citizenProperty&&type == 'edit'?rowdata.citizenProperty.special:false
              })(
                <Checkbox/>
              )}
            </FormItem>
          </Col>
        </Row>
      </div>
    )
  }

  renderHousehold = ()=>{
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
    };
    const formItemLayout2 = {
      labelCol: { span: 18 },
      wrapperCol: { span: 6 },
    };
    const { visible, type } = this.props;
    const { rowdata } = this.state;
    const citizenProperty = rowdata.citizenProperty||{};
    const household = this.state.rowdata.household||{
      householdProperty: {},
      householdAreaInfo: {}
    };
    const { genderCode, nationCode, degreeCode, relationCode, identTypeCode, citizenInfoTypeCode, householdTypeCode, fiveTypeCode } = this.props.config;

    return (
      <div>
        <h3>土地信息</h3>
        <Row gutter={20}>
          <Col span={6}>
            <FormItem {...formItemLayout} label="迁移水库">
              {getFieldDecorator("reservoirsMove",{
                initialValue: type == 'edit'&&household.householdAreaInfo?household.householdAreaInfo.reservoirsMove:""
              })(
                <Input />
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="退耕还林证号">
              {getFieldDecorator("farmToForestNumber",{
                initialValue: type == 'edit'&&household.householdAreaInfo?household.householdAreaInfo.farmToForestNumber:""
              })(
                <Input />
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="耕地面积">
              {getFieldDecorator("farmLandArea",{
                initialValue: type == 'edit'&&household.householdAreaInfo?household.householdAreaInfo.farmLandArea:0
              })(
                <InputNumber />
              )}
              <span className="ant-form-text"> 亩</span>
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="良种面积">
              {getFieldDecorator("fineBreedArea",{
                initialValue: type == 'edit'&&household.householdAreaInfo?household.householdAreaInfo.fineBreedArea:0
              })(
                <InputNumber />
              )}
              <span className="ant-form-text"> 亩</span>
            </FormItem>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={6}>
            <FormItem {...formItemLayout} label="经济面积">
              {getFieldDecorator("economyArea",{
                initialValue: type == 'edit'&&household.householdAreaInfo?household.householdAreaInfo.economyArea:0
              })(
                <InputNumber />
              )}
              <span className="ant-form-text"> 亩</span>
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="农资面积">
              {getFieldDecorator("agriculturalArea",{
                initialValue: type == 'edit'&&household.householdAreaInfo?household.householdAreaInfo.agriculturalArea:0
              })(
                <InputNumber />
              )}
              <span className="ant-form-text"> 亩</span>
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="草补面积">
              {getFieldDecorator("fillGrassArea",{
                initialValue: type == 'edit'&&household.householdAreaInfo?household.householdAreaInfo.fillGrassArea:0
              })(
                <InputNumber />
              )}
              <span className="ant-form-text"> 亩</span>
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="森林生态面积">
              {getFieldDecorator("plainsEcologyArea",{
                initialValue: type == 'edit'&&household.householdAreaInfo?household.householdAreaInfo.plainsEcologyArea:0
              })(
                <InputNumber />
              )}
              <span className="ant-form-text"> 亩</span>
            </FormItem>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={6}>
            <FormItem {...formItemLayout} label="草原生态面积">
              {getFieldDecorator("plainsEcologyArea",{
                initialValue: type == 'edit'&&household.householdAreaInfo?household.householdAreaInfo.plainsEcologyArea:0
              })(
                <InputNumber />
              )}
              <span className="ant-form-text"> 亩</span>
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="巩固退耕面积">
              {getFieldDecorator("consolidateReturnArea",{
                initialValue: type == 'edit'&&household.householdAreaInfo?household.householdAreaInfo.consolidateReturnArea:0
              })(
                <InputNumber />
              )}
              <span className="ant-form-text"> 亩</span>
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="草原禁牧面积">
              {getFieldDecorator("plainsGrazingArea",{
                initialValue: type == 'edit'&&household.householdAreaInfo?household.householdAreaInfo.plainsGrazingArea:0
              })(
                <InputNumber />
              )}
              <span className="ant-form-text"> 亩</span>
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="退耕面积">
              {getFieldDecorator("returnArea",{
                initialValue: type == 'edit'&&household.householdAreaInfo?household.householdAreaInfo.returnArea:0
              })(
                <InputNumber />
              )}
              <span className="ant-form-text"> 亩</span>
            </FormItem>
          </Col>
        </Row>
        <h3>家庭扩展信息</h3>
        <Row gutter={20}>
          <Col span={6}>
            <FormItem {...formItemLayout} label="是否低保户">
              {getFieldDecorator("low",{
                valuePropName: 'checked',
                initialValue: type == 'edit'&&household.householdProperty?household.householdProperty.low:false
              })(
                <Checkbox />
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="申请低保金额">
              {getFieldDecorator("lowAmount",{
                initialValue: type == 'edit'&&household.householdProperty?household.householdProperty.lowAmount:0
              })(
                <InputNumber />
              )}
              <span className="ant-form-text"> 元</span>
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="是否五保户">
              {getFieldDecorator("five",{
                valuePropName: 'checked',
                initialValue: type == 'edit'&&household.householdProperty?household.householdProperty.five:false
              })(
                <Checkbox />
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="五保户类型">
              {getFieldDecorator("fiveTypeCode",{
                initialValue: type == 'edit'&&household.householdProperty?household.householdProperty.fiveTypeCode:""
              })(
                <Select>
                  {
                    (fiveTypeCode||[]).map(function(obj){
                      return (<Option key={obj.dictionaryId} value={ obj.dictionaryCode }>{ obj.dictionaryName }</Option>)
                    })
                  }
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={6}>
            <FormItem {...formItemLayout} label="是否困难户">
              {getFieldDecorator("difficult",{
                valuePropName: 'checked',
                initialValue: type == 'edit'&&household.householdProperty?household.householdProperty.difficult:false
              })(
                <Checkbox />
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="是否特困户">
              {getFieldDecorator("destitute",{
                valuePropName: 'checked',
                initialValue: type == 'edit'&&household.householdProperty?household.householdProperty.destitute:false
              })(
                <Checkbox />
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="是否草原资料">
              {getFieldDecorator("plains",{
                valuePropName: 'checked',
                initialValue: type == 'edit'&&household.householdProperty?household.householdProperty.plains:false
              })(
                <Checkbox />
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="是否三江源困难">
              {getFieldDecorator("sjyDifficult",{
                valuePropName: 'checked',
                initialValue: type == 'edit'&&household.householdProperty?household.householdProperty.sjyDifficult:false
              })(
                <Checkbox />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={6}>
            <FormItem {...formItemLayout} label="是否三江源燃料">
              {getFieldDecorator("djyFuel",{
                valuePropName: 'checked',
                initialValue: type == 'edit'&&household.householdProperty?household.householdProperty.djyFuel:false
              })(
                <Checkbox />
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="是否森林生态">
              {getFieldDecorator("forestEcology",{
                valuePropName: 'checked',
                initialValue: type == 'edit'&&household.householdProperty?household.householdProperty.forestEcology:false
              })(
                <Checkbox />
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="申请生态金额">
              {getFieldDecorator("applyEcologySum",{
                initialValue: type == 'edit'&&household.householdProperty?household.householdProperty.applyEcologySum:0
              })(
                <InputNumber></InputNumber>
              )}
              <span className="ant-form-text"> 元</span>
            </FormItem>
          </Col>
        </Row>
      </div>
    )
  }

  renderBank = ()=>{
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 18 },
      wrapperCol: { span: 6 },
    };
    const { visible, type } = this.props;
    const { bankCode } = this.props.config;

    const columns = [{
      title: '银行类型',
      dataIndex: 'bankCode',
      render: (text, record) => (<span>{ getNameByCode(this.props.config, 'bankCode', text) }</span>)
    }, {
      title: '卡号',
      dataIndex: 'bankNumber'
    }, {
        title: '操作',
        key: 'action',
        render: (text, record) => (<span><a onClick={this.operate.bind(this, 'edit', record)} href="javascript:;">编辑</a> | <a onClick={this.doDelete.bind(this, record)} href="javascript:;">删除</a></span>)
    }];

    return (
      <div>
        <Table 
          columns={columns}
          dataSource={ this.state.citizenBankList }
          rowKey="citizenBankId"
          size="small"
          pagination={false}
        />
        <div style={{textAlign:'center',marginTop:15}}>
          <Button type="dashed" onClick={ this.operate.bind(this, 'new') } style={{ width: '100%' }}>
            <Icon type="plus" /> 添加银行卡
          </Button>
        </div>
      </div>
    )
  }

  render() {
    const { visible, type, rowdata } = this.props;
    
    return (<div>
            <Modal 
              title={ type == 'edit'?"修改用户信息":"新建用户信息" }
              visible={visible}
              onOk={ this.handleCommit } 
              onCancel={ this.onCancel }
              okText="确定" 
              cancelText="取消"
              width="1000px"
            >
              <Spin spinning={this.state.loading}>
                <Form
                  horizontal
                >
                  <Tabs 
                    defaultActiveKey="1" 
                    activeKey={ this.state.activeKey } 
                    onTabClick={ (key)=>{ this.setState({ activeKey: key }) }}
                  >
                    <TabPane tab="居民信息" key="1">
                      { this.renderCitizenInfo() }
                    </TabPane>
                    <TabPane tab="居民扩展信息" key="2">
                      { this.renderCitizenProperty() }
                    </TabPane>
                    <TabPane tab="家庭信息" key="3">
                      { this.renderHousehold() }
                    </TabPane>
                    <TabPane tab="居民银行卡" key="4">
                      { this.renderBank() }
                    </TabPane>
                  </Tabs>
                </Form>
              </Spin>
            </Modal>
            <EditBank
              onOk={ this.editOk }
              onCancel={ this.editCancel }
              visible={ this.state.editBankVisabled }
              type = { this.state.editBankType }
              rowdata = { this.state.editBankRowData }
            />
            </div>);
  }
}

function mapStateToProps(state) {
  return {
    config: state.config
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ addConfig }, dispatch)
}

module.exports = connect(mapStateToProps,mapDispatchToProps)(Form.create()(ModuleName))

